<template>
    <van-tabbar v-model="active" active-color="#ff5f16" inactive-color="#797d82" @change="onChange">
        <!-- 自定义图标得用插槽：具名插槽，名称为icon -->
        <van-tabbar-item>
            <van-icon slot="icon" size="20" class="iconfont">&#xe7d3;</van-icon>
            <span>电影</span>
        </van-tabbar-item>
        <van-tabbar-item>
            <van-icon slot="icon" size="20" class="iconfont">&#xe8c0;</van-icon>
            <span>影院</span>
        </van-tabbar-item>
        <van-tabbar-item>
            <van-icon slot="icon" size="20" class="iconfont">&#xe90d;</van-icon>
            <span>资讯</span>
        </van-tabbar-item>
        <van-tabbar-item>
            <van-icon slot="icon" size="20" class="iconfont">&#xe639;</van-icon>
            <span>我的</span>
        </van-tabbar-item>
    </van-tabbar>
</template>

<script>
import Vue from "vue";
import { Tabbar, TabbarItem, Icon } from "vant";
// 导入阿里的图标
import "@/assets/iconfont/iconfont.css";
Vue.use(Tabbar);
Vue.use(TabbarItem);
Vue.use(Icon);
export default {
    data() {
        return {
            // 选中的那个菜单的索引
            active: 0,
            // 定义菜单的地址，要求与索引值一一对应
            urls: ["/films/nowPlaying", "/cinemas", "/infos", "/center"],
        };
    },
    methods: {
        onChange(active) {
            let url = this.urls[active];
            this.$router.push(url);
        },
    },
    created() {
        // 获取当前的path（不是fullPath，因为其可能带有参数）
        let path = this.$route.path;
        let index = this.urls.indexOf(path);
        // 纠正因为刷新而导致的索引归零问题
        this.active = path === "/films/comingSoon" ? 0 : index;
    },
};
</script>

<style scoped></style>
